<template>
  <div style="height: 100%;overflow: hidden;">
    <navbar>
      <template #title>
        <div class="header-btn-search">
          <router-link tag="div" to="/search">
            <span>
                {{ $t("button_search") }}
            </span>
          </router-link>
        </div>
      </template>
      <template #right>
        <!--目录-->
        <a class="drawer-icon" v-if="freshSecondCatalog && freshSecondCatalog.length !== 0">
          <div class="box-14">
            <i class="catalog-icon"></i>
          </div>
        </a>
        <a class="drawer-icon cur" v-if="freshSecondCatalog && freshSecondCatalog.length == 0">
          <div class="box-14">
            <i class="catalog-icon"></i>
          </div>
        </a>
      </template>
    </navbar>
    <div class="content-noBottom">
      <div class="header-select">
        <van-dropdown-menu active-color="#075ebb">
              <van-dropdown-item :title="titleType" v-model="itemType" :options="typeList" @change="selectType()"/>
          </van-dropdown-menu>
      </div>
      <div class="body-contents" ><!---->
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
          <van-list
              v-model="isLoading"
              :finished="finished"
              :finished-text="(finished&&total>0) ? $t('no_more') : ''"
              loding-text="loading"
              @load="getCourseData(selectSureId, 'refresh', type)"
              style="padding-bottom: 56px;"
              >
              <div style="background: #fafafa;width: 100%;" >
                <div v-if="freshSecondCatalog && freshSecondCatalog.length > 0">
                  <div class="catalog-container">
                    <div v-for="(item,index) in freshSecondCatalog" :key="index" style="margin-right: 10px">
                      <div class="item" :class="[item.id ===selectedSecondId ? 'border-active' : 'border-none']" @click="selectCatalogId(2,item.id)">
                        <span :class="[item.id ===selectedSecondId ? 'span-active' : '']">{{item.name}}</span>
                      </div>
                    </div>
                  </div>
                  <div v-if="freshThirdCatalog && freshThirdCatalog.length >0">
                    <div class="h"></div>
                    <div class="catalog-container">
                      <div v-for="(item,index) in freshThirdCatalog" :key="index" style="margin-right: 10px;">
                        <div class="item" :class="[item.id ===selectedThirdId ? 'border-active' : 'border-none']" @click="selectCatalogId(3,item.id)">
                          <span :class="[item.id ===selectedThirdId ? 'span-active' : '']">{{item.name}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-bind:class="{'height100' : total === 0}">
                <div class="module-box-13" v-for="(item, $index) in freshData" :key="$index" @click="jumpPage(item.itmType, item.itmId, item.itmTitle)" v-if="total > 0">
                  <div class="img-box">
                    <img :src="appUrl + item.itmIcon" alt="" style="width: 100%;">
                  </div>
                  <div class="content-box">
                    <div class="word-clamp-2 font-size15">
                      <span class="public-mobile-icon"> </span>
                      {{item.itmTitle}}
                    </div>
                    <div>
                      <span>{{ type == 'course' ? courseType[item.itmType] : examType[item.itmType] }}</span>
                      <span><i class="people-num-icon"></i>{{ item.totalLearner }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--暂无数据-->
              <div v-if="total === 0" style="height: 400px;">
                <div class="box-table" style="width:100%;height:100%;">
                  <div class="box-table-cell" style="text-align: center;">
                    <div class="no-data" >
                      <img src="../../../static/images/no-data.png" alt=""/>
                      <p class="color999">{{ $t("no_data") }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin.js';
export default {
    name: 'FilterDirectory',
    mixins: [mixin],
    data() {
        return {
            id: this.$route.params.firstLevel,
            type: this.$route.params.cosType,
            subCatalogs: {},
            freshCatalog: [],
            selectedCatalogs: [],
            freshSelectedCatalogs: [], //新接口返回的课程子目录数据
            freshSecondCatalog: [], //新接口返回的二级子目录
            freshThirdCatalog: [], //新接口返回三级目录
            selectedSecondId: 0, //选中的第二层目录id
            selectedThirdId: 0, //选中的第三层目录id
            selectSureId: 0, //确认选中的目录id
            isShowDrawer: false,
            pageNo: 1,
            freshData: [],
            pageSize: 10,
            classList: [],
            total: 0,
            isShow1: false,
            itemType: '',
            finished: false,
            isRefresh: false,
            isLoading: true,
            types: {
                All: this.$t('type_all_title'),
                selfstudy: this.$t('cos_type_selfstudy'),
                classroom: this.$t('cos_type_classroom'),
                audiovideo: this.$t('find_open_course'),
                INTEGRATED: this.$t('cos_type_integrated')
            },
            titleType: this.type === 'course' ? this.$t('cos_type') : this.$t('exam_type'),
            typeList: []
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getCourseData(this.selectSureId, 'refresh', this.type);
                this.isRefresh = false;
            }, 900);
        },
        selectType() {
            this.titleType = this.types[this.itemType];
            this.freshData = [];
            this.pageNo = 1;
            this.getCourseData(this.selectSureId, 'refresh', this.type);
        },
        /*@不虎 新接口返回二级子目录列表*/
        getFreshCatalog(id, index) {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/tree/course/catalog`,
                params: {
                    parentType: 'CATALOG',
                    id: id
                }
            }).then(res => {
                if (res && res.status === 200) {
                    if (index === 2) {
                        this.freshSecondCatalog = res.data; //拿到二级子目录
                    }
                    if (index === 3) {
                        this.freshThirdCatalog = res.data; //拿到三级子目录
                    }
                }
            });
        },
        /*选择目录*/
        selectCatalogId(hierarchy, id) {
            this.selectSureId = id;
            if (hierarchy === 2) {
                this.selectedSecondId = id;
                if (this.selectedThirdId !== 0) {
                    this.selectedThirdId = 0;
                    this.freshThirdCatalog = [];
                }
                //获取第三层子目录数据
                this.getFreshCatalog(id, 3);
            }
            if (hierarchy === 3) {
                this.selectedThirdId = id;
            }
            //刷新当前目录课程列表 （考试）
            this.getCourseData(id, 'refresh', this.type);
        },
        /*获取目录下的课程*/
        getCourseData(id, option, type) {
            let tempData = {};
            if (type === 'course') {
                tempData = {
                    isExamInd: false,
                    isMobileInd: true,
                    itmTypeList: this.itemType === 'All' || this.itemType === '' ? null : [this.itemType],
                    tndId: Number(id)
                };
            } else {
                tempData = {
                    isExamInd: true,
                    isMobileInd: true,
                    onlineOrOffline: this.itemType === 'All' || this.itemType === '' ? '' : this.itemType,
                    tndId: Number(id)
                };
            }
            this.$axios({
                method: 'POST',
                url: type === 'course' ? `/app/api/trainee/course/center/list` : `/app/api/trainee/exam/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                },
                data: tempData
            }).then(res => {
                if (res && res.status === 200) {
                    if (option === 'refresh') {
                        this.freshData = res.data.results; //拿到课程数据
                    } else {
                        this.freshData = [...this.freshData, ...res.data.results];
                    }
                    this.total = res.data.totalRecord;
                    this.pageNo++;
                    this.isLoading = false;
                    if (this.freshData.length >= this.total) {
                        this.finished = true;
                    }
                }
            });
        },
        //跳转详情
        jumpPage(type, id, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        // 下拉菜单
        changeTypes() {
            this.typeList = [...this.getItemTypes.map(item => ({text: item.type, value: item.value}))];
        }
    },
    mounted() {
        this.getFreshCatalog(this.id, 2);
        this.getCourseData(this.id, 'refresh', this.type);
        this.selectSureId = this.id;
        this.changeTypes();
    },
    filters: {
        omit(val) {
            if (val) {
                let nameString = val.substr(0);
                if (nameString.length > 10) {
                    nameString = `${nameString.substr(0, 5)}...${nameString.substr(-5)}`;
                }
                return `${nameString}`;
            } else {
                return val;
            }
        }
    }
};
</script>

<style scoped lang="less">
    .classDrawer{
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 999;
    }
    .drawer{
        background: #ffffff;
        height: 100%;
        width: 80%;
        float: right;
    }
    .drawer div:first-child{
        height: 72px;
        border-bottom: 1px solid #dddddd;
        padding: 20px 15px;
    }
    .drawer div:first-child span em{
        display: block;
    }
    .drawer div:first-child span:first-child{
        display: inline-block;
    }
    .drawer div:first-child span:first-child em:first-child{
        font-size: 18px;
        font-weight: bold;
    }
    .drawer div:first-child span:first-child em:last-child{
        color: #999999;
    }
    .drawer div:last-child span{
        display: block;
        padding: 15px 15px 15px 19px;
    }
    .icon-close {
        float: right;
        width: 40px;
        height: 40px;
    }
    .icon-close i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border: 2px solid #333;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(135deg);
        margin: 9px 0 0 10px;
    }
  /*新样式*/
   .catalog-container{
     display: flex;
     padding-left:15px;
     flex-wrap: wrap;
     span{
       font-size: 14px;
       color: #606266;
       text-align: center;
     }
     .span-active{
       color: #FFFFFF;
     }
     .border-active{
       border:2px solid  #075ebb;
       background-color: #075ebb;
       border-top-right-radius:5%;
       border-top-left-radius:5%;
       border-bottom-right-radius:5%;
       border-bottom-left-radius:5%;
     }
     .border-none{
       border:2px solid  transparent;
     }
     .item{
       width: 100%;
       height: 22px;
       margin: 5px 0
     }
   }
   .h{
     width: 100%;
     height: 1px;
     border-top: solid #ACC0D8 1px;
   }
  .body-contents{
    height: calc(100% - 44px);
  }
</style>
